<template>
  <div class="left">
    <el-menu
        :default-active="useRoute().fullPath"
        class="el-menu-list"
        :collapse="stores().theme.isCollapse"
        :unique-opened="true"
        router
    >
      <!--多级菜单,自循环-->
      <MenuItem
          v-for="item in menuTree"
          :key="item.id"
          :item="item"
      >
      </MenuItem>
    </el-menu>
  </div>
</template>
<script setup lang="ts">
import {stores} from "@/base/stores";
import MenuItem from "@/base/views/layout1/left/menuItem.vue";
import {useRoute} from "vue-router";

const menuTree = stores().user.userInfo?.menuTree;

</script>

<style scoped lang="scss">
.left {
  background-color: var(--layout1-left-bg);
}
.el-menu {
  height: 100%;
  overflow-y: auto;
}
.el-menu:not(.el-menu--collapse) {
  width: var(--layout1-left-width);
}
</style>